<template>
  <div>
      <!-- <div style="margin-top: 16px; padding-bottom: 8px;border-bottom: 1px solid #dadcde;">
        <el-row type="flex" justify="space-between">
          <el-col :span="12">
            <div class="condition-title" style="line-height: 32px;">{{$t("message.filterCondition")}}</div>
          </el-col>
          <el-col :span="12">
            <div class="float-right" style="margin-left: 14px">
              <el-button @click="reset">{{$t("message.reset")}}</el-button>
              <el-button @click="search" type="primary">{{$t("message.filter")}}</el-button>
            </div>
            <div class="float-right">
              <el-form :model="condition" label-width="50px" ref="conditionForm">
                <el-form-item :label="$t('label.grade') + ':'" prop="grade">
                  <el-date-picker
                    v-model="condition.grade"
                    value-format="yyyy"
                    align="right"
                    type="year"
                    :placeholder="$t('common.pla.pleaseSelect')"
                    clearable
                    style="width: 100%" />
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </div> -->
       <ConditionCard body-style="padding: 24px 24px 6px;" @search="search" @reset="reset">
         <el-form :model="condition" label-width="100px" ref="conditionForm">
            <el-row :gutter="24">
            <el-col :span="8">
                <el-form-item :label="$t('label.grade') + ':'" prop="grade">
                <el-date-picker
                    v-model="condition.grade"
                    value-format="yyyy"
                    align="right"
                    type="year"
                    @change="selectChange"
                    :placeholder="$t('common.pla.pleaseSelect')"
                    clearable
                    style="width: 100%" />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item :label="$t('label.college') + ':'" prop="college">
                <el-select v-model="condition.college" @change="initProfessionalOption" style="width: 100%" filterable clearable>
                    <el-option v-for="item in options.college" :key="item.key" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item :label="$t('label.major') + ':'" prop="professional">
                <el-select v-model="condition.professional" @change="professionChange" style="width: 100%" filterable
                    clearable>
                    <el-option v-for="item in options.professional" :key="item.key" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>
            </el-col>
            </el-row>
            <el-row :gutter="24">
            <el-col :span="8">
                <el-form-item :label="$t('auditStandard.proDirection') + ':'" prop="direction">
                <el-select v-model="condition.direction"  @change="search" style="width: 100%" filterable clearable>
                    <el-option v-for="item in options.direction" :key="item.key" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>
            </el-col>
            </el-row>
        </el-form>
      </ConditionCard>
      <el-card shadow="never" body-style="padding: 0 24px 24px;">
      <div style="margin-top: 24px" v-if="generalCourseTableData[1] && generalCourseTableData[1].data.length"
        class="generaTable">
        <edu-table :data="generalCourseTableData" :order="false" :pagination="false" border :selection="false"
          :merge='true' :show-header="false" :stripe="false" style="width: 100%;">
          <edu-table-column v-for="(item, key) in generalCourseTableData[1].data" :key="key" min-width="280" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.data[key]">
                <el-form label-width="150px">
                  <el-form-item :label="scope.row.data[key].labName + ':'">
                    <el-input v-model="scope.row.data[key].credit" type="number" min="0" style="width: 100%"></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </template>
          </edu-table-column>
        </edu-table>
        <div class="float-right" style="margin-top: 16px;">
          <el-button @click="cancel">{{$t("message.cancel")}}</el-button>
          <el-button @click="confirm" type="primary">{{$t("message.confirm")}}</el-button>
        </div>
      </div>
    </el-card>
  </div>

</template>
<script>
  import {
    queryDic
  } from "common/src/api/dictionary";
  import {HIDE_FACULTYCODE} from '../components/gradMangeUtis'
  import UTILS from "common/src/utils/utils";
  import api from 'common/src/api/graduationManagement/graduationManage';
  import {queryFacultyListByGrade} from 'common/src/api/graduationManagement/graduationManage';
  export default {
    data() {
      return {
        condition: {
            grade: '',
            college: '',
            professional: '',
            direction: ''
        },
        options: {
          college: [],
          professional: [],
          direction: []
        },
        generalCourseTableData: [],
        cacheData: [],
        isOverseas: '0'
      }
    },
    created() {
        //this.initCollageOption();
    },
    methods: {
      reset() {
        this.$refs.conditionForm.resetFields();
        this.options.college = [];
        this.options.professional = [];
        this.options.direction = [];
        this.generalCourseTableData = [];
        this.cacheData = [];
      },
      search() {
        this.getStandard();
      },
      getStandard() {
        if (this.condition.grade) {
          let params = {
            ...this.condition
          };
          api.geStandardLabel(params).then(res => {
            this.generalCourseTableData = [];
            this.cacheData = [];
            if (res && res.code === 200) {
              let {
                ElectiveStandard
              } = res.data || {};
              this.handleElectiveStandard(ElectiveStandard);
            }
          }).catch(() =>{
            this.generalCourseTableData = [];
            this.cacheData = [];
          });
        }else {
          this.$message({
            message: this.$t('auditStandard.selectGradeTip'),
            type: 'warning'
          });
          this.generalCourseTableData = [];
          this.cacheData = [];
        }
      },
      handleElectiveStandard(param) {
        if (!param || !param.length) {
          return;
        }
        this.ElectiveStandardData = param;
        this.cacheData = _.cloneDeep(param);
        let totals = 0;
        let data = param.filter(v => {
          if (v.orderNum === 999) {
            totals = v.credit;
          }
          return v.orderNum !== 999;
        })
        let len = data.length;
        let index = 1;
        let list = [{
          data: [{
            labName: this.$t('auditStandard.creditStandardGeneralCourses'),
            credit: 0
          }]
        }];
        let calcuTotal = 0;
        for (let i = 0; i < len; i++) {
          data[i].credit && (calcuTotal += Number(data[i].credit));
          if (i !== 0 && i % 4 === 0) {
            index++;
          }
          if (!list[index]) {
            list[index] = {
              data: []
            };
          }
          data[i].credit = data[i].credit || 0;
          list[index].data.push(data[i]);
        }
        list[0].columnList = [{
          index: 0,
          rowspan: 1,
          colspan: list[1] && list[1].data.length || 0
        }];
        list[0].data[0].credit = totals || calcuTotal;
        this.generalCourseTableData = list;
      },
      confirm() {
        if (!this.condition.college || !this.condition.grade || !this.condition.professional) {
            this.$message({
                message: '设置标准时请先选择年级、学院、专业',
                type: 'warning'
            });
            return;
        }
        let params = [];
        if (this.ElectiveStandardData) {
          let isExist = false;
          this.ElectiveStandardData.forEach(item => {
            let paramItem = {
              label: item.labID,
              labelName: item.labName,
              parentLabel: item.parentLabID,
              parentLabelName: item.parentLabName,
              credits: Number(item.credit),
              isOverseas: this.isOverseas,
              type: item.type,
              ...this.condition
            }
            if (item.orderNum === 999) {
              isExist = true;
              paramItem.credits = Number(this.generalCourseTableData[0].data[0].credit);
              paramItem.label = 999;
            }
            params.push(paramItem);
          });
          if (!isExist) {
            params.push({
              label: 999,
              credits: Number(this.generalCourseTableData[0].data[0].credit),
              isOverseas: this.isOverseas,
              ...this.condition
            })
          }
          api.saveStandardElective(params).then(res => {
            if (res && res.code === 200) {
              this.$message({
                message: this.$t('auditStandard.setGeneralCoursesStandardsSuccessTip'),
                type: 'success'
              }); 
              this.getStandard();
            }
          })
        }
      },
      cancel() {
        this.handleElectiveStandard(this.cacheData);
      },
      initCollageOption() {
        // const data = {
        //   lang: this.$store.getters.language || "cn",
        //   type: "allChild",
        //   keys: ["X_YX"]
        // };
        this.condition.college = '';
        this.options.college = [];
        const data = {
            grade: this.condition.grade
        }
        if (!data.grade) {
            return;
        }
        queryFacultyListByGrade(data).then(res => {
          if (res.code === 200) {
                this.options.college = (res.data || []).map(item => {
                    return {
                        label: item.facultyNameI18n,
                        value: item.facultyCode,
                        key: item.facultyCode
                    }
                })
          }
        });
      },
      initProfessionalOption() {
        this.options.professional = [];
        this.condition.professional = '';
        this.options.direction = [];
        this.condition.direction = '';
        if (!this.condition.college || !this.condition.grade) {
            return;
        }
        let param = {
            faculty: this.condition.college,
            grade: this.condition.grade,
            pageNum_: 1,
            pageSize_: 100,
            projId: "1"
        }
        api.getProfessionList(param).then(res => {
            if (res && res.code === 200) {
            let listData = res.data && res.data.list || [];
            let options = [];
            listData.forEach(item => {
                if (item.professionCode) {
                options.push({
                    key: item.professionCode,
                    value: item.professionCode,
                    label: item.professionName
                })
                }
            })
            this.options.professional = options;
            }
        })
      },
      initDirection() {
        this.options.direction = [];
        this.condition.direction = '';
        if (this.condition.grade && this.condition.professional) {
          let params = {
            pageNum_: 1,
            pageSize_: 20,
            grade: this.condition.grade,
            professionCode: this.condition.professional
          };
          api.findDirMaintenList(params).then(res => {
            if (res && res.code === 200) {
              let listData = res.data && res.data.list || [];
              let options = [];
              listData.forEach(item => {
                if (item.code) {
                  options.push({
                    key: item.code,
                    value: item.code,
                    label: item.name
                  })
                }
              })
              this.options.direction = options;
            }
          })
        }
      },
      selectChange() {
        this.initCollageOption();
        this.initProfessionalOption();
      },
      professionChange() {
        this.initDirection();
        this.search();
      }
    }
  }

</script>
<style scoped lang="scss">
  .generaTable ::v-deep .el-form-item {
    margin-bottom: 0px;
  }

  .condition-title {
    color: #2b3b4e;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
  }
</style>
